import { useEffect, useState } from 'react'
import { GetRightsFnc } from '@/api/rights'
import style from './index.module.scss'
import { Breadcrumb, Table, Tag } from 'antd'



const Rights = () => {
  const [dataSource, setDataSource] = useState([])  // table数据源
  const [pageNow, setPageNow] = useState(1)
  const [pageSize, setPageSize] = useState(2)
  const [total] = useState(0)
  const columns = [
    {title: '权限名称', dataIndex: 'authName', key: 'authName', width: 130, ellipsis: true},
    {title: '路径', dataIndex: 'path', key: 'path',width: 120, ellipsis: true},
    {title: '权限等级', dataIndex: 'level', width: 80, key: 'level', render: (_:number, record: {level: string}) => levelTag(record.level)}
  ]

  const init = async () => {
   const res = await GetRightsFnc()
   if(res.data.meta.status === 200) {
    let arr = []
    arr = res.data.data.map((item: any) => {
      return {
        key: item.id,
        id: item.id,
        authName: item.authName,
        path: item.path,
        level: item.level
      }
    })
    setDataSource(arr)
   }
  }
  useEffect(() => {init()}, [])
  
  const levelTag = (level: string) => {
    if(level === '0') { 
      return <Tag color="blue">一级</Tag> 
    } else if(level === '1') {
      return <Tag color="green">二级</Tag> 
    } else {
      return <Tag color="orange">三级</Tag> 
    }
  }

  // 更改每页数量 或者 切换当前页 给子组件使用
  const sizeCurrentChange = (current: number, pageSize: number) => {
    setPageNow(current)
    setPageSize(pageSize)
    init()
  }

  return (
    <>
     <Breadcrumb items={[{ title: '用户管理' }, { title: '用户列表' }]} />

     <div className={style.rightsContent}>
      <Table dataSource={dataSource} columns={columns}  bordered={true} scroll={{x:500}} 
      pagination={{current: pageNow, pageSize: pageSize, total: total, pageSizeOptions: [2,5,10], showQuickJumper: true, showSizeChanger: true, onChange: sizeCurrentChange}}/>
     </div> 
    </>
  )
}

export default Rights